<template>
  <div class="floating-consult" :style="{ top: position.top + 'px', left: position.left + 'px' }">
    <!-- 可拖动区域 -->
    <div class="header" @mousedown="startDrag">
      <span>在线咨询</span>
      <button class="toggle" @click.stop="minimized = !minimized">
        {{ minimized ? "展开" : "最小化" }}
      </button>
    </div>

    <!-- 展开内容区域 -->
    <div v-show="!minimized" class="content">
      <div class="white">
        <img class="imges" src="https://20560495.s61i.faiusr.com/4/AD0I7-TmCRAEGAAgjK317AUoiICJ3wEwGTga.png.webp" alt="" />
        <span class="tite-green">4399-0527-0000</span>
      </div>
      <div class="images-box">
        <img class="image" src="https://20560495.s61i.faiusr.com/4/AD0I7-TmCRAEGAAg1K317AUo9pOTMDAfOB8.png.webp" alt="" />
        <span style="color: #ffffff">QQ咨询</span>
      </div>
      <div class="links">
        <div class="qq-box">
          <span style="margin-left: 20px">售前咨询</span>
        </div>
        <div class="qq-box">
          <span style="margin-left: 20px">售后咨询</span>
        </div>
        <div class="win-box">
          <span style="margin-left: 20px">售后咨询</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";

const minimized = ref(false);

const position = ref({
  top: window.innerHeight - 350,
  left: window.innerWidth - 220
});

let isDragging = false;
let offsetX = 0;
let offsetY = 0;

const startDrag = (e: MouseEvent) => {
  isDragging = true;
  offsetX = e.clientX - position.value.left;
  offsetY = e.clientY - position.value.top;
  document.addEventListener("mousemove", onDrag);
  document.addEventListener("mouseup", stopDrag);
};

const onDrag = (e: MouseEvent) => {
  if (!isDragging) return;
  const newLeft = e.clientX - offsetX;
  const newTop = e.clientY - offsetY;

  const maxLeft = window.innerWidth - 220;
  const maxTop = window.innerHeight - 80;

  position.value.left = Math.max(0, Math.min(newLeft, maxLeft));
  position.value.top = Math.max(0, Math.min(newTop, maxTop));
};

const stopDrag = () => {
  isDragging = false;
  document.removeEventListener("mousemove", onDrag);
  document.removeEventListener("mouseup", stopDrag);

  // 吸附到最近边缘（左右）
  const screenMiddle = window.innerWidth / 2;
  position.value.left = position.value.left < screenMiddle ? 0 : window.innerWidth - 220;
};

onMounted(() => {
  window.addEventListener("resize", () => {
    const maxLeft = window.innerWidth - 220;
    const maxTop = window.innerHeight - 350;
    position.value.left = Math.min(position.value.left, maxLeft);
    position.value.top = Math.min(position.value.top, maxTop);
  });
});

onUnmounted(() => {
  document.removeEventListener("mousemove", onDrag);
  document.removeEventListener("mouseup", stopDrag);
});
</script>

<style scoped>
.floating-consult {
  position: fixed;
  z-index: 9999;
  width: 200px;
  overflow: hidden;
  user-select: none;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgb(0 0 0 / 15%);
  transition: box-shadow 0.3s;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  background: #e6aa08;
}
.toggle {
  font-size: 14px;
  color: white;
  cursor: pointer;
  background: transparent;
  border: none;
}
.content {
  height: 280px;
  background: #e6aa08;
}
.white {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 60px;
  background-color: #ffffff;
}
.imges {
  width: 20px;
  height: 20px;
}
.tite-green {
  font-size: 14px;
  color: #4ab344;
}
.images-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.image {
  width: 31px;
  height: 31px;
  margin-top: 20px;
}
.links {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}
.qq-box,
.win-box {
  display: flex;
  align-items: center;
  width: 112px;
  height: 27px;
  padding-left: 30px;
  margin-bottom: 10px;
  font-size: 13px;
  color: #999999;
  background: url("https://20560495.s61i.faiusr.com/4/AD0I7-TmCRAEGAAgybD17AUowKC61gIwcDgb.png.webp") no-repeat center/cover;
  border: 1px solid white;
  border-radius: 4px;
}
.win-box {
  background: url("https://20560495.s61i.faiusr.com/4/AD0I7-TmCRAEGAAghbP17AUoifalnwQwcDgb.png.webp") no-repeat center/cover;
}
</style>
